<template>
<div>
  <div class="header">
    <div class="left" @click="handleMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="right">{{$t('m.welcome')}}</div>
<!--    <div>-->
<!--      <button @click="openWin">点击</button>-->
<!--    </div>-->
  </div>
<!--  <div class="top" v-if="imgShow">-->
<!--    <span>安卓端APP二维码</span>-->
<!--    <img src="@/assets/image/123.png" alt="请求错误">-->
<!--  </div>-->
  <van-popup v-model="show" position="left" :style="{ width: '80%',height: '100%'}">
    <header style="width:100%">
      <div class="menu_header">
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-touxiang"></use>
          </svg>
        </span>
        <span class="color weight">{{userName}}</span>
      </div>
    </header>
    <section class="menu">
      <Menu></Menu>
    </section>
    <footer>
      <div class="out" @click="logout">
        <van-icon name="close" size="6.944vw" class="color"/>
        <h2 style="padding-left:1.389vw" class="color">{{$t('m.logo')}}</h2>
      </div>
    </footer>
  </van-popup>
</div>
</template>

<script>
import Menu from './compoments/Menu'
import { Dialog } from 'vant'
import emas from '@csair/windvane-api-ehome'

export default {
  data() {
    return {
      show: false, // 控制菜单项显示与隐藏
      userName: '',
      pdfUrl: '',
      imgShow: false
    }
  },
  components: {
    Menu
  },
  created() {
    // this.getUserInfo()
  },
  activated() {
    this.getUserInfo()
  },
  methods: {
    handleMenu() {
      this.show = true
    },
    // 退出登录
    logout() {
      let language = sessionStorage.getItem('language')
      let system = sessionStorage.getItem('system')
      Dialog.confirm({ message: `${this.$t('m.logout')}` })
            .then(() => {
              if (!sessionStorage.getItem('token')) emas.EmasCubeLogin.logout()
              this.$api.login.logout(window.sessionStorage.getItem('token'))
                  .then(res => {
                    if (res.status === 200) {
                      window.sessionStorage.clear()
                      sessionStorage.setItem('language',language)
                      sessionStorage.setItem('system',system)
                      emas.EmasCubeLogin.logout()
                      this.$router.push('/')
                    } else {
                      this.$msg.fail(res.message)
                    }
                  })
                  .catch(err => {
                    this.$msg.fail('退出失败,请稍后再试',err)
                  })
            })
            .catch((err) => {
              console.log(err  || '退出失败')
            })
    },
    // 获取用户详情
    getUserInfo() {
      if (!window.sessionStorage.getItem('token')) {
        setTimeout(() => {
          const obj = {
            iPhoneXStyle: 'Bool',
            adaptNaviHeight: 'float',
            adaptTabHeight: 'float'
          }
          emas
              .EmasInformation
              .getInformation(obj)
              .then(result => {
                console.log(result,456)
                sessionStorage.setItem('token', result.token)
                if (result.language !== 'zh') {
                  this.$i18n.locale = 'en-US'
                } else {
                  this.$i18n.locale = 'zh-CN'
                }
                this.$api.login.getUserInfo()
                    .then(res => {
                      this.userName = res.chineseName
                      if (res.accountType === 'admin') {
                        this.imgShow = true
                      }
                      sessionStorage.setItem('accountType', res.accountType)
                    })
                    .catch(err => {
                      this.$msg.fail(err || '获取用户信息失败')
                    })
              })
        }, 0)

      } else {
        this.$api.login.getUserInfo()
            .then(res => {
              this.userName = res.chineseName
              if (res.accountType === 'admin') {
                this.imgShow = true
              }
              sessionStorage.setItem('accountType', res.accountType)
            })
            .catch(err => {
              this.$msg.fail(err || '获取用户信息失败')
            })
      }

    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  background-color:#639df5;
  padding: 6.944vw 0 ;
}
header {
  margin-top: 5.556vw;
}
.left {
  width: 15vw;
}
.left span {
  width: 100%;
  display: block;
  margin-left: 2.778vw;
  height: 2.778vw;
  background-color:white;
}
.left span:nth-child(2) {
  margin: 1.389vw 2.778vw;
}
.right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5.556vw;
  font-weight: 600;
  color: white;
}
/deep/.van-popup--left {
  left: 0
}
.menu_header {
  display: flex;
  /* justify-content: center;*/
  align-items: center;
  padding: 15px;
}
.icon {
  width: 50px;
  height: 50px;
}
.out {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 3%;
  bottom: 3%;
}
h2 {
  margin: 0;
  font-size: 5.556vw;
}
.menu {
  height: calc(100vh - 73px - 73px);
  overflow-y: scroll;
}
.color {
  color: rgba(0,0,0,.5);
  padding-left: 20px;
  font-size: 16px;
}
.top {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 100px;
}
</style>
